<template>
  <BasicModal 
    v-bind="$attrs" @register="registerModal" title="编辑" 
    :defaultFullscreen="true" @ok="handleSubmit" destroyOnClose
  >
    <Tabs v-model:activeKey="activeKey" @change="handleTabChange" :destroy-inactive-tab-pane="false">
      <TabPane key="2" tab="字段信息">
        <GenTableColumn 
          ref="genTableColumnRef" :activeKey="activeKey" 
          :tableColumns="tableColumns" @valueChange="handleFieldChange"
        />
        <!-- <Demo></Demo> -->

      </TabPane>
      <TabPane key="3" tab="页面属性">
        <PageAttributeColumn 
          ref="pageAttributeColumnRef" :activeKey="activeKey" :tableColumns="tableColumns"
          @valueChange="handleFieldChange"
        />
        <!-- <Demo></Demo> -->
      </TabPane>
      <TabPane key="4" tab="索引">
        <GenTableIndex ref="genTableIndexRef" :activeKey="activeKey" :rowId="rowId" :tableColumns="tableColumns"/>
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import GenTableColumn from './tabs/GenTableColumn.vue';
  import Demo from './tabs/Demo.vue';
  import GenTableIndex from './tabs/GenTableIndex.vue';
  import PageAttributeColumn from './tabs/PageAttributeColumn.vue';
  import { TabPane, Tabs } from 'ant-design-vue'
  import {saveOrUpdateGenTableInfo, listGenTableColumn, getGenTable} from '../codeGen.api';
  import { ref, onUnmounted } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage'
  const { createMessage } = useMessage()
  const activeKey = ref('-1')
  const preActiveKey = ref('-1')
  const rowId = ref()
  const tableColumns = ref()
  const genTable = ref()

  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    activeKey.value = '2'
    preActiveKey.value = '2'
    // await resetGenInfoFields();
    setModalProps({confirmLoading: false, minHeight:80});
    rowId.value = data.record.id;
    genTable.value = await getGenTable(rowId.value)
    tableColumns.value = await listGenTableColumn(rowId.value)
    // const result = await getInfo(unref(rowId));
  });
  const baseInfoRef = ref()
  const genTableColumnRef = ref()
  const genInfoRef = ref()
  const genTableIndexRef = ref()
  const pageAttributeColumnRef = ref()
  const timeout = ref<any>()
  const handleTabChange = (activeKey) => {
    console.log("activeKey: ", activeKey)
  }

  onUnmounted(() => {
    clearTimeout(timeout.value)
  })

  const handleFieldChange = (event) => tableColumns.value = event.$table.data

  //表单提交事件
  async function handleSubmit(exit) {
    const key = 'code_gen_submit'
    createMessage.loading({
      content: `保存中...`,
      key,
      duration: 0,
    });
    timeout.value = setTimeout(async () => {
      try {
        let isSuccess = await validateRef("4", genTableIndexRef)
          && await validateRef("2", genTableColumnRef)
          && await validateRef("3", pageAttributeColumnRef)
        
        if (!isSuccess) {
          return
        }
        
        const genTableIndexData = genTableIndexRef.value?.getData()
        const data = {
          columnList: tableColumns.value, 
          indexList: genTableIndexData
        }
        console.log("submit data: ", data)
        await saveOrUpdateGenTableInfo(data);
        exit && closeModal()
        createMessage.destroy(key)
        createMessage.success("保存成功")
        //刷新列表
        // emit('success', {isUpdate: unref(isUpdate), values: {...values, id: rowId.value}});
      } catch(e) {
        exit && closeModal()
      } finally {
        createMessage.destroy(key)
        activeKey.value = '1'
        setModalProps({confirmLoading: false});
      }
    }, 200)
  }

  const validateRef = async (key: string, ref: any) => {
    if (ref && ref.value) {
      const isSuccess = await ref.value.validate(() => activeKey.value = key)
      if (!isSuccess) {
        createMessage.error("表单校验未通过")
        console.log("校验失败 activeKey.value: ", key)
        return false
      }
    }
    return true
  }

</script>